<template>
  <div class="contBody">
    <h2 class="title">MapVectorSource</h2>
    <div id="VectorSource" class="map__x"></div>
    <div class="btn">
      <el-button type="primary" @click="loadVectData">加载GEOJSON</el-button>
      <el-button type="primary" @click="loadVectDataRemove">
        移除GEOJSON
      </el-button>
    </div>
  </div>
</template>

<script>
import { Map, View } from "ol"; // 地图实例方法、视图方法
import Tile from "ol/layer/Tile"; // 瓦片渲染方法
import Vector from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Fill from "ol/style/Fill";
import Circle from "ol/style/Circle";
import XYZ from "ol/source/XYZ"; // OSM瓦片【OSM不能在实际开发中使用，因为OSM里中国地图的边界有点问题！！！！】
import "ol/ol.css"; // 地图样式

import yunnan from "@/assets/json/00000000.json";
// import hunan from "@/assets/kml/2012-02-10.kml";

export default {
  name: "MapVectorSource",
  data() {
    return {
      map: null,
      styles: {
        Point: [
          new Style({
            //点样式
            image: new Circle({
              radius: 5,
              fill: null,
              stroke: new Stroke({ color: "red", width: 1 }),
            }),
          }),
        ],
        LineString: [
          new Style({
            stroke: new Stroke({
              //线的边界样式
              color: "green",
              width: 1,
            }),
          }),
        ],
        MultiLineString: [
          new Style({
            stroke: new Stroke({
              //多线的边界样式
              color: "green",
              width: 1,
            }),
          }),
        ],
        MultiPoint: [
          new Style({
            //多点的点样式
            image: new Circle({
              radius: 5,
              fill: null,
              stroke: new Stroke({ color: "red", width: 1 }),
            }),
          }),
        ],
        MultiPolygon: [
          new Style({
            stroke: new Stroke({
              //多区的边界样式
              color: "blue",
              width: 1,
            }),
            fill: new Fill({
              //多区的填充样式
              color: "rgba(0, 0, 255, 0.1)",
            }),
          }),
        ],
        Polygon: [
          new Style({
            stroke: new Stroke({
              //区的边界样式
              color: "blue",
              lineDash: [4],
              width: 3,
            }),
            fill: new Fill({
              //区的填充样式
              color: "rgba(0, 0, 255, 0.1)",
            }),
          }),
        ],
        GeometryCollection: [
          new Style({
            stroke: new Stroke({
              //集合要素的边界样式
              color: "magenta",
              width: 2,
            }),
            fill: new Fill({
              //集合要素的填充样式
              color: "magenta",
            }),
            image: new Circle({
              //集合要素的点样式
              radius: 10,
              fill: null,
              stroke: new Stroke({
                color: "magenta",
              }),
            }),
          }),
        ],
        Circle: [
          new Style({
            stroke: new Stroke({
              //圆的边界样式
              color: "red",
              width: 2,
            }),
            fill: new Fill({
              //圆的填充样式
              color: "rgba(255,0,0,0.2)",
            }),
          }),
        ],
      },
      addStatus: false,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 地图实例
      this.map = new Map({
        target: "VectorSource", // 对应页面里 id 为 map 的元素
        layers: [
          // 图层
          new Tile({
            title: "天地图矢量图层",
            source: new XYZ({
              url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
              attributions: "天地图的属性描述",
              wrapX: false,
            }),
            preload: Infinity,
            zIndex: 1,
            visible: true,
          }),
        ],
        view: new View({
          // 地图视图
          projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
          center: [100.864943, 24.041115], // 云南坐标
          minZoom: 5, // 地图缩放最小级别
          zoom: 6, // 地图缩放级别（打开页面时默认级别）
        }),
      });
    },
    loadVectData() {
      // 避免重复加载
      if (this.addStatus) return;
      const vectorSourceGeoJson = new VectorSource({
        features: new GeoJSON().readFeatures(yunnan),
      });
      const vectorLayerGeoJson = new Vector({
        source: vectorSourceGeoJson,
        style: this.styleFunction,
        preload: Infinity,
        zIndex: 10,
        visible: true,
      });
      this.map.addLayer(vectorLayerGeoJson);
      this.addStatus = true;

      //获取地图视图
      const view = this.map.getView();
      //平移地图
      view.setCenter([102.83, 24.88]);
      //地图缩放
      view.setZoom(6);
    },
    styleFunction(feature) {
      //根据要素类型设置几何要素的样式
      return this.styles[feature.getGeometry().getType()];
    },
    loadVectDataRemove() {
      // 删除图层
      const layers = this.map.getLayers();
      this.map.removeLayer(layers.item(1));
      this.addStatus = false;
    },
  },
};
</script>

<style lang="css" scoped>
.contBody .title {
  padding: 0 0 24px;
}
.map__x {
  width: 100%;
  height: 600px;
  border: 1px solid #eee;
  background: rgba(0, 0, 0, 1);
}

.btn {
  text-align: left;
}
</style>
